import React from 'react'
import Loadable from 'react-loadable'

const MyLoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (!isLoading) {
    return <div className="Myloading">Loading...</div>
  } else if (error) {
    return (
      <div className="Myloading">
        Sorry, there was a problem loading the page.
      </div>
    )
  } else {
    return null
  }
}
const MyMarking = Loadable({
  loader: () => import('../pages/MyMarking.jsx'),
  loading: MyLoadingComponent,
})

const ExamDetail = Loadable({
  loader: () => import('../pages/ExamDetail.jsx'),
  loading: MyLoadingComponent,
})

const MarkingExam = Loadable({
  loader: () => import('../pages/MarkingExam.jsx'),
  loading: MyLoadingComponent,
})

const routers = [
  {
    path: '/TmfsExam/ReadingTask/ExamDetail/MarkingExam',
    component: MarkingExam,
    key: 3,
  },
  {
    path: '/TmfsExam/ReadingTask/ExamDetail',
    component: ExamDetail,
    key: 2,
  },
  {
    path: '/TmfsExam/ReadingTask',
    component: MyMarking,
    key: 1,
  },
]

export default routers
